<template>
  <q-field
    outlined
    dense
    style="min-width:310px;"
    ref="field"
    :value="value"
    :readonly="readonly"
    :rules="required?[requiredTest]:undefined"
    :label="label"
    class="input-Date"
  >
    <q-popup-proxy
      v-if="!disable"
      ref="qDateProxy"
      transition-show="scale"
      transition-hide="scale"
      @before-show="toggle"
    >
      <div class="column q-pa-sm" style="width: 310px;height:300px;">
        <div class="col">
          <q-date
            v-model="date"
            minimal
            mask="YYYY-MM-DD"
            style="box-shadow: none;"
            :value="date"
            @input="input($event,time)"
          />
        </div>
        <div class="row no-wrap q-pt-sm">
          <q-input v-model="time" class="col" outlined dense>
            <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
              <select-time :value="time" @input="input(date,$event)" />
            </q-popup-proxy>
            <template v-slot:append>
              <q-icon name="schedule" />
            </template>
          </q-input>
          <q-space />
          <q-btn color="primary" class="q-mr-sm" flat label="此刻" @click="setNow" />
          <q-btn label="确定" @click="closeProxy" />
        </div>
      </div>
    </q-popup-proxy>
    <template v-slot:append>
      <q-icon name="event" color="primary" class="cursor-pointer" />
    </template>
    <template #control>{{value}}</template>
  </q-field>
</template>

<script>
import { date } from 'quasar';
import { requiredTest } from 'boot/inputTest';
import SelectTime from './selecttime';

export default {
  components: {
    SelectTime,
  },
  props: {
    value: [String, Object],
    required: Boolean,
    readonly: Boolean,
    disable: Boolean,
    label: String,
  },
  data() {
    return {
      date: '',
      time: '',
      dateTime: '',
    };
  },
  watch: {},
  computed: {},
  methods: {
    requiredTest,
    closeProxy() {
      this.$refs.qDateProxy.hide();
    },
    setNow() {
      this.input();
    },
    toggle() {
      this.date = '';
      this.time = '';
      if (this.value) {
        [this.date, this.time] = this.value.split(' ');
      }
    },
    input(d, t) {
      this.date = d || date.formatDate(Date.now(), 'YYYY-MM-DD');
      this.time = t || date.formatDate(Date.now(), 'HH:mm:ss');
      this.$emit('input', `${this.date} ${this.time}`);
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="stylus">
.q-date__view
  padding 8px 8px
  min-height 270px
</style>
